<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/basic.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/slide-left.css">
<!-- 	<link rel="stylesheet" type="text/css" href="css/reset.css"> -->
	<title>桌游精灵</title>
</head>
<body>
<div class="body-wrap">
		<header class="header">
			<span class="btn-slide-bar"><img alt="菜单" src="img/menu.png"></span>
		</header>

		<div class="main-wrap">

			<div class="recent">
				<a href="vote.html">上次游戏：捉鬼猜词版<span class="back"><img src="img/back.png"></span>
				</a>
			</div>
				

			<div id="carousel-game-type"  class="carousel slide" data-ride="carousel" interval="5000">


				<ol class="carousel-indicators" >
					<li data-target="#carousel-game-type" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-game-tape" data-slide-to="1"></li>
					<li data-target="#carousel-game-type" data-slide-to="2"></li>
					<li data-target="#carousel-game-type" data-slide-to="3"></li>
				</ol>

				<div class="carousel-inner" role="list-box">

					<div class="item item-game item-game-1 active">
						<h2 class="game-name">捉鬼游戏</h2>
						<div class="option-container">
							<div class="game-option">
								<a href="vote.html" class="btn btn-option">简化版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>



							<div class="game-option">
								<a href="vote.html" class="btn btn-option">猜词版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

							<div class="game-option">
								<a href="vote.html" class="btn btn-option">白痴版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

						</div>
					</div>

					<div class="item item-game item-game-2">
						<h2 class="game-name">炸狼堡</h2>
						<div class="option-container">
							<div class="game-option">
								<a href="vote.html" class="btn btn-option">初级版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>



							<div class="game-option">
								<a href="vote.html" class="btn btn-option">高级版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

							<div class="game-option">
								<a href="vote.html" class="btn btn-option">变态版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

						</div>
					</div>

					<div class="item item-game item-game-3">
						<h2 class="game-name">杀人游戏</h2>
						<div class="option-container">
							<div class="game-option">
								<a href="vote.html" class="btn btn-option">简化版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>



							<div class="game-option">
								<a href="vote.html" class="btn btn-option">警察版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

							<div class="game-option">
								<a href="vote.html" class="btn btn-option">不看牌</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

						</div>
					</div>

					<div class="item item-game item-game-4">
						<h2 class="game-name">扫雷</h2>
						<div class="option-container">
							<div class="game-option">
								<a href="vote.html" class="btn btn-option">小鸟版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>



							<div class="game-option">
								<a href="vote.html" class="btn btn-option">大鸟版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

							<div class="game-option">
								<a href="vote.html" class="btn btn-option">开心版</a>
								<p>
									有1133个用户正在玩此款游戏
								</p>
							</div>

						</div>
					</div>

				</div>

					<a class="left carousel-control" href="#carousel-game-type" data-slide="prev" role="button">
					<span class="control-icon control-icon-left"><img src="img/prev.png"></span>
					</a>

					<a class="right carousel-control" href="#carousel-game-type" data-slide="next" role="button">
					<span class="control-icon control-icon-right"><img src="img/next.png"></span>
					</a>

			</div>
		</div> 
		<div class="slide-bar">
			<ul class="list-group">
				<li class="list-group-item"><a href="#"><span class="icon notice"></span><span>公告</span><span  class="back pull-right"></span></a></li>
				<li class="list-group-item"><a href="#"><span class="icon config"></span><span>设置</span><span class="back pull-right"></span></a></li>
				<li class="list-group-item"><a><span class="icon help"></span><span>帮助</span><span class="back pull-right"></span></a></li>
				<li class="list-group-item"><a href="#"><span class="icon about"></span><span>关于</span><span class="back pull-right"></span></a></li>
			</ul>
		</div>
</div>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script>
	document.addEventListener("DOMContentLoaded", function(){
		(function(){
			var _btn  = document.querySelector(".btn-slide-bar"),
				_body = document.querySelector("body");
				_btn.onclick = function(){
					_body.classList.toggle("active");
				}
		})(window)
	},false);
	</script>
</body>
</html>